<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页面</title>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="/static/layui/layui.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body onload="loadSelect();">

<div class="layui-container">
    <!--水平导航栏-->
    <ul class="layui-nav"  style="background:midnightblue;">
        <li class="layui-nav-item">
            <a href="{% url 'main' %}">全国气象展示</a>
        </li>

        <li class="layui-nav-item  layui-this" >
            <a href="{% url 'search' %}">气象数据搜索展示</a>
        </li>

        <li class="layui-nav-item">
            <a href="{% url 'chinaMap' %}">全国天气展示</a>
        </li>

        <li class="layui-nav-item">
            <a href="javascript:;">统计图表</a>
            <!-- 二级菜单 -->
            <dl class="layui-nav-child">
                <dd>
                    <a href="{% url 'max_temp_state' %}">全国地区最高温度</a>
                </dd>
                <dd>
                    <a href="{% url 'min_temp_state' %}">全国地区最低温度</a>

                </dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-layout-admin" style="left: 350px; ">

            <label color="white">
                <!-- 显示信息代码位置 -->
                {{ msg }}
            </label>
            </li>
            <li class="layui-nav-item layui-layout-admin" style="left: 420px; ">
                <a href="{% url 'logout' %}" class="layui-btn" style="background:orange;">登出</a>
            </li>
    </ul>
    <br>
    <!-- 搜索框显示：行内表单 -->
    <div class="layui-form-item">
        <br><br>
        <!-- 第一个搜索 -->
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 180px">
                <select name="state" class="layui-input" id='state'>
                    <option value="">请选择区域</option>
                    <!-- 需要动态加载下拉框的选项 -->
                </select>
            </div>
            <div class="layui-input-inline" style="width: 120px">
                <!-- 注意button标签的id设置 -->
                <button class="layui-btn" id='stateBtn' data-type="reload">搜索</button>
            </div>
        </div>
        <!-- 第二个搜索 -->
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 180px">
                <select name="city" class="layui-input" id='city'>
                    <option value="">请选择城市</option>
                    <!-- 需要动态加载下拉框的选项 -->
                </select>
            </div>
            <div class="layui-input-inline" style="width: 120px">
                <!-- 注意button标签的id设置 -->
                <button class="layui-btn" id='cityBtn' data-type="reload">搜索</button>
            </div>
        </div>
        <!-- 第三个搜索 -->
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 180px">
                <select name="date" class="layui-input" id='dt'>
                    <option value="">请选择日期</option>
                    <!-- 需要动态加载下拉框的选项 -->
                </select>
            </div>
            <div class="layui-input-inline" style="width: 120px">
                <!-- 注意button标签的id设置 -->
                <button class="layui-btn" id='dtBtn' data-type="reload">搜索</button>
            </div>
        </div>

    </div>
    <!-- 表格显示搜索数据 -->
    <table class="layui-hide" lay-type="post" id="tableData"></table>

</div>
<script type="text/javascript">
    // 注意:导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'table'], function () {
        var element = layui.element;
        var table = layui.table;
        table.render({
            id: 'testReload',
            elem: '#tableData' //注意：table标签的id属性值
            , url: '{% url "loadAllData" %}' //注意：Django后台数据请求的路由地址
            , limit: 5 //默认一页展示多少条数据
            //设置可选项，每页显多少条数据
            , limits: [5, 10, 20]
            // 每一列写入的数据，后端传来的参数填写进去
            , cols: [[
                {field: 'id', title: 'ID', sort: true, fixed: 'left'},
                {field: 'state', title: '地区'},
                {field: 'city', title: '城市'},
                {field: 'dt', title: '日期'},
                {field: 'min_temp', title: '最低温度'},
                {field: 'max_temp', title: '最高温度'},
                {field: 'weather', title: '天气'},
                {field: 'wind', title: '风况'},
            ]]
            // 开启分页
            , page: true

        });

        $('#stateBtn').click(function () {
            var inputVal = $('#state').val()
            table.reload('testReload', {
                url: '{% url "loadSearchStateData" %}'
                , limit: 5
                , limits: [5, 10, 20]
                , where: {
                    query: inputVal
                }
                , page: {
                    curr: 1
                }
            });
        });

        $('#cityBtn').click(function () {
            var inputVal = $('#city').val()
            table.reload('testReload', {
                url: '{% url "loadSearchCityData" %}'
                , limit: 5
                , limits: [5, 10, 20]
                , where: {
                    query: inputVal
                }
                , page: {
                    curr: 1
                }
            });
        });

        $('#dtBtn').click(function () {
            var inputVal = $('#dt').val()
            table.reload('testReload', {
                url: '{% url "loadSearchDtData" %}'
                , limit: 5
                , limits: [5, 10, 20]
                , where: {
                    query: inputVal
                }
                , page: {
                    curr: 1
                }
            });
        });


    });

    //异步加载下拉框的选项值:设置成启动文件自动执行函数，在body中添加onload属性
    function loadSelect() {
        $.ajax({
            url: "{% url 'loadSelectData' %}",
            type: "GET",
            success: function (data) {
                var state_list = data['state_datas'];
                for (var i in state_list) {
                    $("#state").append("<option value='" + state_list[i]['state'] + "'>" + state_list[i]['state'] + "</option>");
                }
                var city_list = data['city_datas'];
                for (i in city_list) {
                    $("#city").append("<option value='" + city_list[i]['city'] + "'>" + city_list[i]['city'] + "</option>");
                }
                var dt_list = data['dt_datas'];
                for (i in dt_list) {
                    $("#dt").append("<option value='" + dt_list[i]['dt'] + "'>" + dt_list[i]['dt'] + "</option>");
                }

            }
        })
    }
</script>

</body>
</html>